
<template>
  <div>
    {{ page }}
  </div>
  <div>
    <ElForm :inline="true">
      <ElFormItem>
        <ElInput v-model="queryAInfo.rname" placeholder="原神角色模糊查询"> </ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton v-loading="loading" @click="requery" type="primary">查询</ElButton>
        <ElButton v-loading="loading" @click="reset" type="danger">重置</ElButton>
        <ElButton type="warning">添加</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
  <div v-loading="loading">
    <ElTable :data="list" stripe border>
      <ElTableColumn prop="rid" label="角色编号"></ElTableColumn>
      <ElTableColumn prop="rname" label="原神角色名称"></ElTableColumn>
      <ElTableColumn prop="sex" label="角色性别"></ElTableColumn>
      <ElTableColumn prop="tbYsArms.arms" label="角色武器类型"></ElTableColumn>
      <ElTableColumn prop="tbYsAtr.atr" label="角色属性"></ElTableColumn>
      <ElTableColumn label="信息修改时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.lastupdate) }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作">
        <template #default="scope">
          <ElButton type="primary">修改</ElButton>
          <ElButton type="danger">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>

    <PageComp :page="page" @page-change="query" @size-change="sizeChange"></PageComp>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ApiService from '../../ts/ApiService'
import Tools from '../../ts/Tools'
import { BaseResult, BaselistResult, PageInfo } from '../../ts/BaseResult'
import { Role,Atr,Arms } from '../../ts/Ys'
import { ElDialog, ElButton, ElMessageBox, ElPagination, ElTable, ElTableColumn, ElFormItem, ElInput } from 'element-plus'
import PageComp from '../../components/pageComp.vue'

const title = ref('原神角色信息管理')

//#region ========查询部分============
const loading = ref(false)
const page = ref(new PageInfo())
const list = ref(new Array<Role>())
const queryAInfo = ref({
  rname: '',
})


function sizeChange(page:PageInfo){
  console.log('分页组件传递的信息',page)
}

function reset() {
  queryAInfo.value = {
    rname: '',
  }
  requery()
}

function requery() {
  page.value.pageNumber = 1
  query()
}
function query() {
  loading.value = true
  ApiService.get('/role/query', Tools.concatJson(page.value, queryAInfo.value), (data: BaselistResult<Role>) => {
    loading.value = false
    if (data.success) {
      page.value = data.page
      list.value = data.data
      return
    }
  })
}
query()

</script>
<style></style>
